<template>
  <div>
    <!--    面包屑导航区-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!--  卡片视图区-->
    <el-card>
      <el-row>
        <!--    添加角色按钮-->
        <el-col>
          <el-button type="success" @click="isShowAddroles=!isShowAddroles">添加角色</el-button>
        </el-col>
        <!--    角色列表区域-->
        <el-col>
          <el-table :data="rolesData" border stripe>
            <!--      展开列-->
            <el-table-column type="expand" label="详" v-slot="slot">

              <!--          循环一级权限-->
              <div style="padding: 20px">
                <el-row class="inCenter" v-for="a in slot.row.children" :key="a.id"
                        style="border-bottom: 1px solid #eee;padding-left: 20px">
                  <!--   渲染一级权限-->
                  <el-col :span="5">
                    <el-tag closable>{{ a.authName }}</el-tag>
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                  <!--   渲染二级和三级权限权限-->
                  <el-col :span="20">
                    <!--    通过for渲染二级权限-->
                    <el-row class="inCenter" v-for="b in a.children" :key="b.id">
                      <el-col :span="5">
                        <el-tag type="success" closable>{{ b.authName }}</el-tag>
                        <i class="el-icon-caret-right"></i>
                      </el-col>

                      <el-col :span="16">
                        <el-tag type="warning" v-for="c in b.children" :key="c.id" closable>
                          {{ c.authName }}
                        </el-tag>
                      </el-col>
                    </el-row>

                  </el-col>
                </el-row>
              </div>
            </el-table-column>
            <!--      索引列-->
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column prop="roleName" label="角色名称"></el-table-column>
            <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
            <el-table-column label="操作" v-slot="slot">
              <el-button type="success" icon="el-icon-edit" @click="editRole(slot.row)">编译</el-button>
              <el-button type="danger" icon="el-icon-delete" @click="deleteRoles(slot.row)">删除</el-button>
              <el-button type="warning" icon="el-icon-setting" @click="editRight(slot.row)">分配权限</el-button>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>

    <!--  弹窗对话框区-->
    <div>
      <!--  添加角色对话框-->
      <el-dialog title="添加角色" :visible.sync="isShowAddroles" width="30%" @close="$refs.addRoles.resetFields()">
        <!--      信息填写区-->
        <el-form :model="addRolesData" label-position="top" label-width="80px" :rules="addRolesDataRule" ref="addRoles">
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="addRolesData.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述">
            <el-input v-model="addRolesData.roleDesc"></el-input>
          </el-form-item>
        </el-form>
        <!--      下方按钮区-->
        <span slot="footer" class="dialog-footer">
        <el-button @click="isShowAddroles = false">取 消</el-button>
        <el-button type="primary" @click="addRoles">确 定</el-button>
  </span>
      </el-dialog>

      <!--编辑角色对话框-->
      <el-dialog title="编辑角色" :visible.sync="isShowEditR">
        <el-form>
          <el-form-item label="角色名称"><el-input v-model="editRD.roleName"></el-input></el-form-item>
          <el-form-item label="角色表示"><el-input v-model="editRD.roleDesc"></el-input></el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowEditR = false">取 消</el-button>
          <el-button type="primary" @click="yesEdit">确 定</el-button>
        </span>
      </el-dialog>

      <!--分配权限对话框-->
      <el-dialog title="分配权限" :visible.sync="isShowRR" @close="defaultKey=[]">
        <!--data:这课树的数据源
        props：配置项
        show-checkbox：变为复选框
        :default-checked-keys="defaultKey"默认选中节点
        node-key="id"  ！！重要！！，配合...this.$refs.tree.getCheckedKeys()获取选中节点的id
        -->
        <el-tree
            ref="tree"
            :data="rights"
            default-expand-all
            :default-checked-keys="defaultKey"
            node-key="id"
            :props="{
              label:'authName',
              children:'children',
            }"
            show-checkbox
           >
        </el-tree>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowRR = false">取 消</el-button>
          <el-button type="primary" @click="yesaddRole">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "roles",
  data() {
    return {
      //所有角色信息
      rolesData: [],
      //获取所有限权信息
      rights:[],
      //是否展示添加对话框
      isShowAddroles: false,
      //展现编辑角色
      isShowEditR:false,
      //展现分配限权
      isShowRR:false,
      //添加对话框的双向绑定数据
      addRolesData: {
        roleName: '',
        roleDesc: ''
      },
      //添加对话框的校验规则
      addRolesDataRule: {
        roleName: [{required: true, message: '请输入角色名称', trigger: 'blur'}]
      },
      //编译角色的数据
      editRD:{
        id:0,
        roleName:'',
        roleDesc:'',
      },
      //分配权限数据
      addRightData:{
        roleId:0,
        rids:''
      },
      //默认选中的节点
      defaultKey:[]
    }
  },
  methods: {
    //获取所有角色
    getRolesData() {
      this.$http.get('roles').then(res => {
        if (res.data.meta.status !== 200) return this.$message.error("获取角色信息失败")
        this.rolesData = res.data.data
      })
    },
    //添加角色
    addRoles() {
      this.isShowAddroles = !this.isShowAddroles
      this.$refs.addRoles.validate(valid => {
        if (!valid) return this.$message.error("校验失败")
        this.$http.post('roles', this.addRolesData).then(res => {
          if (res.data.meta.status !== 201) return this.$message.error("添加角色失败")
          this.$message.success("添加角色成功")
        })
      })
    },
    //删除角色
    deleteRoles(role) {
      this.$http.delete(`roles/${role.id}`).then(res => {
        if (res.data.meta.status !== 200) return this.$message.error("删除失败")
        this.$message.success("删除成功")
        this.getRolesData()
      })
    },
    //分配权限
    editRight(row) {
      this.isShowRR=true
      this.$http.get('rights/tree').then(res=>{
        this.rights=res.data.data
      })
      this.addRightData.roleId=row.id
      this.get3(row,this.defaultKey)
    },
    //编译角色
    editRole(row) {
      this.isShowEditR=true
      this.editRD=row
    },
    //确认编辑
    yesEdit(){
      this.$http.put('roles/'+this.editRD.id,this.editRD).then(res=>{
        if(res.data.meta.status!==200) return this.$message.error('编辑错误')
        this.$message.success('编辑成功')
        this.isShowEditR=false
        this.getRolesData()
      })
    },
  //  递归获取节点
    get3(item,arr){
      if(item.children===undefined){
        return arr.push(item.id)
      }
      item.children.forEach(a=>{
        this.get3(a,arr)
      })
    },
    //确定添加权限
    yesaddRole(){
      let arr=[...this.$refs.tree.getCheckedKeys(),...this.$refs.tree.getHalfCheckedKeys()]
      this.addRightData.rids=arr.join(',')
      this.$http.post(`roles/${this.addRightData.roleId}/rights`,this.addRightData).then(res=>{
        if(res.data.meta.status!==200)return this.$message.error('授权失败')
        this.$message.success('授权成功')
        this.isShowRR=false
        this.getRolesData()
      })
    }
  },
  mounted() {
    this.getRolesData()
  }
}
</script>

<style scoped>
.el-table {
  margin-top: 15px;
}

.el-tag {
  margin: 5px;
}

.inCenter {
  display: flex;
  align-items: center;
}
</style>